<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }

        .layui-form-label {
            width: 100px;
            height: 50px;
            line-height: 45px;
            padding: 0px;
        }

        .layui-form .layui-input-inline {
            margin-left: 30px;
            width: 290px;
        }

        .layui-laydate {
            font-size: 16px;
        }

        .layui-laydate-footer span {
            font-size: 15px;
            height: 30px;
            line-height: 30px;
        }

        .laydate-footer-btns {
            position: absolute;
            right: 10px;
            top: 7px;
        }

        .main-container .layui-form-item {
            margin: 15px 0px !important;
        }

        .layui-input {
            height: 50px;
        }

        .submit-btn-container .layui-btn, .pear-btn {
            height: 45px;
            width: 130px;
            font-size: 20px;
        }

        .pear-btn, .layui-btn {
            border-radius: 5px;
        }

        .pear-btn i {
            font-size: 20px;
        }

        .layui-form-select dl, .dtree-select {
            position: absolute;
            left: 0;
            top: 51px;
        }

        .layui-form-selectup dl {
            top: auto;
            bottom: 51px;
        }

        .layui-select-disabled .layui-disabled {
            color: black !important;
        }
    </style>
</head>
<body>
<div class="main-container">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="font-size: 16px;">
        <form class="layui-form" action="">
            <!--            <div class="layui-form-item">-->
            <!--                <label class="layui-form-label required">区域</label>-->
            <!--                <div class="layui-input-block">-->
            <!--                    <input type="number" id="areaId" name="areaId" lay-verify="required" lay-reqtext="请选择区域"-->
            <!--                           style="display:none;width: 0px" autocomplete="off" class="layui-input">-->
            <!--                    <ul id="dataTree" class="dtree" data-id="0"></ul>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label required">载体名称</label>
                <div class="layui-input-block">
                    <input type="text" name="cabinetName" autocomplete="off" lay-verify="required"
                           lay-reqtext="请输入载体名称" placeholder="请输入载体名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">ip地址</label>
                <div class="layui-input-block">
                    <input type="text" name="ip" autocomplete="off" lay-verify="required" lay-reqtext="请输入ip地址"
                           placeholder="请输入ip地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">区号</label>
                <div class="layui-input-block">
                    <input type="number" name="cabinetNumber" autocomplete="off" lay-verify="required"
                           lay-affix="number"
                           lay-reqtext="请输入区号" placeholder="请输入区号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">列数</label>
                <div class="layui-input-block">
                    <input type="text" name="columnNumber" autocomplete="off"
                           placeholder="请输入列数" lay-verify="required" id="columnNumber"
                           lay-reqtext="请输入列数" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">节数</label>
                <div class="layui-input-block">
                    <input type="number" lay-affix="number" name="cabinetJoint" autocomplete="off"
                           placeholder="请输入节数" lay-verify="required"
                           lay-reqtext="请输入节数" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">层数</label>
                <div class="layui-input-block">
                    <input type="number" lay-affix="number" name="cabinetLayer" autocomplete="off"
                           placeholder="请输入层数" lay-verify="required"
                           lay-reqtext="请输入层数" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">一层数量</label>
                <div class="layui-input-block">
                    <input type="number" lay-affix="number" name="rfidNumber" autocomplete="off"
                           placeholder="请输入一层位置数量" lay-verify="required"
                           lay-reqtext="请输入一层位置数量" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">固定列</label>
                <div class="layui-input-block">
                    <select name="fixedColumn" lay-search id="columnNumberSelect" required lay-reqtext="请选择固定列">
                        <option value="">请选择固定列</option>
                    </select>
                </div>
            </div>
            <div id="rfidInfo" style="display: none">
                <div style="display: flex;margin-left: 28px;flex-direction: row;justify-content: space-between;align-items: center;">
                    <div style="display: flex;">
                        <div style="width: 4px;height: 20px;background: #2176FF;border-radius: 0px 0px 0px 0px;"></div>
                        <div style="font-size: 18px;color: #000000;line-height: 22px;margin-left: 10px;">rfid_Ip配置
                        </div>
                    </div>
                    <div>
                        <a href="#" class="foldBtn">
                            <img src="/img/archives/downArrow.png" alt="" style="width: 16px;height: 16px">
                        </a>
                    </div>
                </div>
            </div>
            <div id="rfidBody" style="display: none">
            </div>

            <div class="layui-form-item">
                <div style="width: 100%;height: 1px;background: #E9E9E9;"></div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-item submit-btn-container">
                    <div class="layui-input-block"
                         style="display: flex;flex-direction: row;justify-content: center;">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="denseRack-save">
                            <i class="layui-icon layui-icon-file-b"></i>
                            保存
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary" style="margin-left: 25px">重置
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script th:inline="javascript">
    var sysType = parseInt([[${sysType}]]);

    layui.use(['form', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;

        if (sysType === 3) {
            $("#rfidInfo").css("display", '');

            let personInfo = false;
            // 下箭头
            $(".foldBtn").click(function () {
                if (!personInfo) {
                    $("#rfidBody").css("display", '');
                    $(".foldBtn img").attr("src", "/img/archives/upArrow.png");
                    personInfo = true;
                    let columnNumber = $("#columnNumber").val();
                    if (columnNumber == null || columnNumber == "") {
                        layer.msg("请输入列数,输入列数后请再点击折叠按钮", {icon: 2, time: 3000});
                    } else {
                        let html = "";
                        for (let column = 1; column <= parseInt(columnNumber); column++) {
                            html += '<div class="layui-form-item">';
                            html += '<label class="layui-form-label required">' + column + '列ip地址</label>';
                            html += '<div class="layui-input-block">';
                            html += '<input type="text" name="rfidColumn'+ column +'" autocomplete="off" lay-verify="required" lay-reqtext="请输入ip地址"\n' +
                                '                           placeholder="请输入ip地址" class="layui-input">';
                            html += '</div></div>';
                            console.log(column);
                        }
                        $("#rfidBody").empty().append(html);
                    }


                } else {
                    $("#rfidBody").css("display", 'none');
                    $(".foldBtn img").attr("src", "/img/archives/downArrow.png");
                    personInfo = false;
                }
            })
        }

        // // dtree插件下拉框点击空白处隐藏
        // $(document).bind("click", function (e) {
        //     var e = e || window.event;    //事件对象，兼容IE
        //     var target = e.target || e.srcElement;  //源对象，兼容火狐和IE
        //     if ($(target).prop("class").indexOf("layui-card") == -1) {
        //         $(".dtree-select-show").removeClass("dtree-select-show");
        //     }
        // })

        // // 初始化树
        // dtree.render({
        //     elem: "#dataTree",
        //     initLevel: "1",//默认展开层级为1
        //     width: "100%",
        //     method: 'get',
        //     dataStyle: "layuiStyle",  //使用layui风格的数据格式
        //     // response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
        //     url: "/archives/area/buildAreaTree/table",
        //     dataFormat: "list",  //配置data的风格为list
        //     select: true, //指定下拉树模式
        //     selectTips: "不选默认是顶级区域",
        //     selectCardHeight: "200"
        // });
        // dtree.on("node('dataTree')", function (obj) {
        //     var param = dtree.getNowParam("dataTree");
        //     $("#areaId").val(param.nodeId);
        // });
        form.on('submit(denseRack-save)', function (data) {
            let loading = layer.load();
            $.ajax({
                url: '/host/denseRack/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 1800}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layer.table.reload('area-table');
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1800});
                    }
                }
            })
            return false;
        });

        $('#columnNumber').blur(function () {
            let columnNumber = $(this).val();
            if (columnNumber != "") {
                let html = "<option value=''>请选择固定列</option>";
                for (let column = 1; column <= parseInt(columnNumber); column++) {
                    html += '<option value="' + column + '">' + column + '</option>';
                }
                $("#columnNumberSelect").html(html);
                form.render('select'); //刷新select选择框渲染
            }


        });

    });
</script>
</body>
</html>